<template>
<div class="float">
    <ul class="haleyMenu" :style="{top:top+'px',right:right+'px'}">
        <li>
            <a href="https://haley1688.gitee.io/fun/">
                返回首页
            </a>
        </li>
        <li class="btnDown" @click="top+=10">
            下移10px
        </li>
        <li class="btnLeft" @click="right+=10">
            左移10px
        </li>
    </ul>
</div>
</template>
<script>
export default {
    data() {
        return {
            top:30,
            right:10
        }
    },
}
</script>

<style lang="scss">
.float {
    ul.haleyMenu {
        position: fixed;
        color: #fff;
        z-index: 99999999;
        transition: all 0.2s;

        li {
            background-color: #005599;
            border-bottom: 1px solid #1738bc;
            list-style: none;
            padding:16px 10px;
            opacity: 0.3;
            &:hover {
                background-color: #009900;
                border-bottom: 1px solid #fff;
                opacity: 1;
            }
            &.btnDown,&.btnLeft{
                cursor: pointer;
            }
            a {
                color: #fff;
                text-decoration: none;
            }

        }
    }
}
</style>
